<template>
    <div class="login">
        <div class="login_box flexbox">
            <div class="login_l flexbox flexcenter"><img src="../../assets/img/login_l.png" alt=""></div>
            <div class="login_r">
                <h5 class="lg_title"><img src="../../assets/img/logo_index.svg" alt=""></h5>
                <el-form ref="loginform" :model="loginform" :rules="loginRules" :hide-required-asterisk='true' label-position="top" size="medium" @keyup.enter.native="submitForm('loginform')">
                    <el-form-item prop="username" label="账号">
                        <el-input v-model="loginform.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="loginform.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-button type="primary" style="width:100%;height:40px;border-radius:4px;font-size:16px;margin-top:40px" @click="submitForm('loginform')" :disabled='disabled' :loading="disabled">登 录</el-button>
                </el-form>
            </div>
        </div>
        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="beian">粤ICP备2022115977号-1</a>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            disabled: false,
            loginform: {
                username: "",
                password: "",
            },
            loginRules: {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
            },
        };
    },
    created() {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.disabled = true;
                    const { data: res } = await this.$http.post(
                        "openapi/Login/index",
                        this.loginform
                    );
                    if (res.code !== 200) {
                        this.disabled = false;
                        this.$message.error(res.msg);
                    } else {
                        const userinfo = res.data;
                        window.localStorage.setItem("token", res.data.token);
                        window.localStorage.setItem(
                            "userinfo",
                            JSON.stringify(userinfo)
                        );
                        this.$router.replace("/main");
                        this.disabled = false;
                    }
                } else {
                    this.disabled = false;
                    return false;
                }
            });
        },
    },
};
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
}
.login_box {
    width: 800px;
    height: 478px;
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
}
.login_l,
.login_r {
    width: 400px;
    box-sizing: border-box;
}
.login_l {
    justify-content: center;
}
.login_r {
    padding: 60px 50px 0;
}
.lg_title {
    text-align: center;
    margin-bottom: 33px;
}
.lg_title img {
    width: 214px;
}
.el-form-item {
    margin-bottom: 20px;
}
.beian{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #000;
    text-decoration: none;
}
</style>
<style>
.login_box .el-input__inner {
    padding: 22px 0px;
    border-radius: 0px;
    border: 0;
    border-bottom: 0.5px solid #d3d4d5;
}
</style>
